<template>
  <!-- 主容器添加黑暗模式背景 -->
  <div class="pt-12  flex flex-col dark:bg-gray-900">
    <!-- 按钮容器 -->
    <div class="m-2 mb-6 flex flex-wrap justify-center items-center">
      <button v-for="item in category" :key="item" class="m-1 px-7 py-2.5 
               bg-white dark:bg-gray-800 
               text-gray-900 dark:text-gray-100 
               text-sm font-medium rounded-lg
               shadow-[0_2px_12px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_2px_12px_-2px_rgba(255,255,255,0.06)]
               hover:shadow-[0_4px_16px_-4px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_16px_-4px_rgba(255,255,255,0.1)]
               transition-all duration-300 hover:-translate-y-0.5
               border border-gray-200 dark:border-gray-700 
               focus:ring-2 focus:ring-gray-900/20 dark:focus:ring-gray-500/50">
        {{ item }}
      </button>
    </div>

    <!-- 文章列表组件（假设已处理黑暗模式） -->
    <div>
      <ArticlesHome />
    </div>
  </div>
</template>

<script setup>
import ArticlesHome from './ArticlesHome.vue';
import { ref } from 'vue';
// 拿到当前的请求头，根据请求头后面的路径发送请求 请求路径如果为空就默认选择一个
let category = ref(['后端', '前端', '动态', '按钮3', '按钮3',])


</script>
<style scoped></style>